<template>
  <section class="grabRecord">
    <ul>
      <li>
        <div class="firstPic"></div>
        <div class="secondText"><span>潘潘达熊猫</span><br> <span>6小时前</span></div>
        <div class="lastText">失败</div>
      </li>
      <li>
        <div class="firstPic"></div>
        <div class="secondText"><span>潘潘达熊猫</span><br> <span>6小时前</span></div>
        <div class="lastText">失败</div>
      </li>
      <li>
        <div class="firstPic"></div>
        <div class="secondText"><span>潘潘达熊猫</span><br> <span>6小时前</span></div>
        <div class="lastText">失败</div>
      </li>
      <li>
        <div class="firstPic"></div>
        <div class="secondText"><span>潘潘达熊猫</span> <br><span>6小时前</span></div>
        <div class="lastText">失败</div>
      </li>
      <li>
        <div class="firstPic"></div>
        <div class="secondText"><span>潘潘达熊猫</span> <br><span>6小时前</span></div>
        <div class="lastText">失败</div>
      </li>
      <li>
        <div class="firstPic"></div>
        <div class="secondText"><span>潘潘达熊猫</span> <br><span>6小时前</span></div>
        <div class="lastText">失败</div>
      </li>

    </ul>
  </section>
</template>
<script>
  export default {}
</script>
<style lang="scss" type="text/css" scoped>
  ul{
    margin: 0;
    padding: 0;}

  section {
    padding-top: 3.41333rem;
    width: 100%; }
  section ul > li {
    list-style: none;
    width: 16rem;
    height: 1.70667rem;
    border-bottom: 1px solid deepskyblue;
    display: flex;
    justify-content: space-around; }
  section ul > li div {
    width: 1.70667rem;
    height: 1.70667rem;
    background-color: transparent;
    text-align: center; }
  section ul > li .firstPic {
    width: 1.70667rem;
    height: 1.70667rem;
    background-image: url("./images/product_frame.png");
    -webkit-background-size: 1.70667rem; }
  section ul > li .secondText {
    width: 3.1rem;
    font-size: 0.2rem;
    color: whitesmoke; }
  section ul > li .lastText {
    color: red;
    line-height: 1.70667rem;
    font-size: 0.42667rem; }

</style>
